<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--去除样式-->
		<link rel="stylesheet" href="css/reg.css" />
		<style>
			.main{
				width: 100%;
				height: 800px;
			}
			.top{
				width: 100%;
				height: 15%;
				background-color: coral;
			}
			.left{
				width: 10%;
				height: 85%;
				background-color: red;
				float: left;
			}
			.right{
				width: 90%;
				height: 85%;
				background-color: black;
				float: right;
			}
			#logo{
				float: right;
				position: absolute;/*相对定位*/
				top:25px
			}
			#title{
				/*调用动画            动画名      时长     周期                        效果*/
				animation: myanmi  2s  infinite  linear;
				width: 80%;
				height: 100px;
				text-align: center;/*水平居中*/
				line-height: 120px;/*垂直居中*/
				font-size: 30px;
				font-weight: bold;
				float: left;
				position: absolute;
				left: 200px;
			}	
			#head_icon{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				position: absolute;
				top: 25px;
				right: 150px;
			}		
			.login_info{
				position: absolute;
				top: 50px;
				right: 45px;
			}
			/*自定义动画*/
			@keyframes myanmi{
				0%{transform: scale(1.0);}
				50%{transform: scale(1.5);}
				100%{transform: scale(1.0);}
			}
			@keyframes play{
				from{transform: rotate(0deg);}
				to{transform: rotate(360deg);}
			}
			#head_icon:hover{
				animation: play 1s infinite linear;
			}
			.menu_main>li>a{
				display: block ;/*行内元素不能设置框高，所以先改变行内元素特性*/
				height:50px;
				line-height: 50px;
				text-align: center;
				color: beige;
				border-bottom: 2px solid royalblue;
				font-size: 30px;
				font-weight: bold;
				border-radius: 5%;/*设置圆角*/
				text-decoration: none;/*溢出不显示*/	
				background-color: #9F9F9F;
			}
			.menu_main>li>a:hover{
				cursor: pointer;
				background-color: #000000;
			}
			.menu_first>ul>li>a{
				display: block ;/*行内元素不能设置框高，所以先改变行内元素特性*/
				height:50px;
				line-height: 50px;
				text-align: center;
				color: beige;
				border-bottom: 2px solid royalblue;
				font-size: 20px;
				font-weight: bold;
				border-radius: 5%;/*设置圆角*/
				text-decoration: none;/*溢出不显示*/
				background-color: #9F9F9F;
			}
			.menu_first>ul{
				display: none;
			}
		</style>
	</head>
	
	
	
	
	<body>
		<div class="main">
			<!--顶部logo-->
			<div class="top">
				<img id="logo"   src="images/logo.png" />
				<div id="title">天天生鲜后台管理</div>
				<img id="head_icon" src="images/所有商品/57ab290aN34f76b37.jpg"/>
				<div class="login_info">管理员：admin</div>
			</div>
			<!--左边菜单-->
			<div class="left">
				<ul class="menu_main">
					<li class="menu_first"><a data-open="none">商品管理</a>
						<ul>
							<li><a >商品列表</a></li>
							<li><a >上架商品</a></li>
							<li><a >未上架商品</a></li>
						</ul>
					</li>
					<li class="menu_first" ><a data-open="none">订单管理</a>
						<ul>
							<li><a >已下单物品</a></li>
							<li><a >未下单物品</a></li>
							<li><a >待下单物品</a></li>
						</ul>
					</li>
					<li class="menu_first"><a data-open="none">广告管理</a>
						<ul>
							<li><a >轮播广告</a></li>
							<li><a>未播广告</a></li>
							<li><a>代接广告</a></li>
						</ul>
					</li>
					<li class="menu_first"><a data-open="none">分类管理</a>
						<ul>
							<li><a>食品</a></li>
							<li><a>服饰</a></li>
							<li><a>玩具</a></li>
						</ul>
					</li>
					<li class="menu_first"><a data-open="none">系统设置</a>
						<ul>
							<li><a>个人设置</a></li>
							<li><a>管理设置</a></li>
							<li><a>帮助</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<!--右边区域-->
			<div class="right">
			<iframe src="welcome.html" name="right" width="100%" height="100%" border="0"></iframe>
			</div>
		</div>
		<script>
			//js的代码
			//获取说有的一级菜单元素
			var all_a = document.querySelectorAll('.menu_first>a');
			//对没一个一级菜单绑定单击事件
			for(var i=0;i<all_a.length;i++){
				all_a[i].addEventListener('click',function(){
					//获取data-open中的数据
					var open = this.dataset.open;
					if(open=='none'){
						//打开菜单
						//修改data-open中的数据
						this.dataset.open='block';
					}else{
						//关闭菜单
						this.dataset.open='none';
					}
					this.nextSibling.nextSibling.style.display=this.dataset.open;
				})
			}
		</script>
	</body>
</html>
